<template>
  <div class="buy">
      <top-header :isLeft="true" title="确认订单"></top-header>
      <div class="top">
          <div class="top1" >
              <div v-if="type == 1" @click="$router.push({name:'MyshoppingAddress'})">
              <div class="top2" v-for="(k,index) in address" :key="index">
          <div class="user">
              <p>{{k.name}}</p>
              <p>{{k.phone}}</p>
          </div>
          <p>{{k.address}}{{k.housenum}}</p> </div></div>
          <div style="width:330px;" @click="$router.push({name:'MyshoppingAddress'})" v-else>请输入收货地址</div>
          <div class="biaoqian"><a-icon type="right" /></div>
      </div>
      <hr style="margin:10px -10px;height:10px;background:#F5F5F5;border:0">
      <div class="content" v-for="(item,index) in goodList" :key="index">
          <div class="content-top">
              <i class="iconfont">&#xeb53;</i>
              <p>{{item.store}} <span>></span></p> 
              
        </div>
        <div class="content1">
            <img :src="getImage(url+item.goodimg)" alt="">
           <div class="title1">
               <p>{{item.title}}</p>
               <p style="color:gray">{{item.goodname}}</p>
            </div> 
            <div class="num">
                <p><span>￥</span>{{item.goodprice}}</p>
                <p>×<span>{{item.num}}</span></p>
            </div>
        </div>
        
      </div>
      <div class="content2">
            <div class="title2">
                <p>运费：</p>
            <p>包邮</p></div> 
         
            <div class="title3">

                <p>合计：</p>
                <p><span>￥</span>{{price}}</p>
            </div>  
        </div>
      <div class="foot1">
      <div class="foot">
         
          <button @click="jiesuan()">结算</button>
          <div class="footer"> <p>实付款：</p>
          <p><span>￥</span>{{price}}</p>
          </div></div>
      </div>
      </div>
      <div class="tanchu1" v-show="show1 == 1">
      <div class="tanchu">
          <div class="tanchu_top">
              <p @click="cloce()">X</p>
          </div>
          <div class="tanchu_content">
              <p>下厨房</p>
              <p>￥<span>{{price}}</span></p>
          </div>
          <div class="tanchu_zhifu" @click="way()">
              <p>支付方式</p>
              <div class="money">
              <img :src="moneyimg" alt="" style=" height: 24px;width:24px">
              <p style="margin-left:10px">{{moneyname}}<span style="margin-left:10px;font-size:16px">></span></p></div>
          </div>
          <div class="tanchu_foot">
              <button @click="queren()">确认支付</button>
          </div>


      </div></div>
      <div class="top3" v-show="showzhifu == 1">
  <div class="goods-psd">
      <p style="float:left;margin-left:10px;font-size:18px" @click="close()">X</p>
    <p class="apply-title">
      请输入支付密码
    </p>
    <p style="margin: 0.2rem">确认支付 <span>{{price}}元</span> </p>
    <div class="psd-container">
      <input class="psd-input" type="password" readonly v-for="(value,index) in passwordGroup" :key="index" :value="value.value">
    </div>
  </div>
  <div class="foot2">
  <div class="input-pan">
    <div class="pan-num" v-for="(value,num) in number" :key="num" @click="inputPsd(value)">{{value}}</div>
  </div></div>
</div>
<div class="success1" v-show="showsuccess == 1">
<div class="success">
    <div style="margin-top:30px">
    <i class="iconfont" style="font-size:50px;color:#48D1CC">&#xe653;</i>
    <p style="font-size:20px">支付成功</p></div>
</div></div>
<div class="success1" v-show="show2 == 1">
<div class="way">
  <p><a-icon type="left" @click="fanhui()"/><span class="zi">选择支付方式</span></p>
  <hr style="margin:0 -10px">
    <div style="margin-top:30px" v-for="(w,index) in ways" :key="index" @click="change(w)">
     
    <img :src="w.imgUrl" alt="">
    <p>{{w.name}}</p>
 
    </div>
</div></div>

  </div>
</template>

<script>
import TopHeader from '../components/TopHeader.vue'
import QS from 'qs'
import linqian from '../assets/imgs/service/零钱.png'
import nongye from '../assets/imgs/service/农业银行.png'
import jianshe from '../assets/imgs/service/建设银行.png'
export default {
  components: { TopHeader},
data() {
    return {
      id:'',
        url:'https://i2.chuimg.com/',
        goodname:'',
        store:"",
        goodList:'',
        price:0,
        address:'',
        type:'',
        show1:'',
        moneyimg:require('../assets/imgs/service/零钱.png'),
        moneyname:'零钱',
        showzhifu:'',
        showsuccess:'',
        show2:'',
          popupVisible1: true,
     realInput: '',
     passwordGroup: [],
     number: ['1','2','3','4','5','6','7','8','9','清空','0','删除'],
     pasgroup: [],
     currentInputIndex:-1,
     ways:[
         {
               imgUrl: linqian,
          name: "零钱",
         },
            {
               imgUrl: nongye,
          name: "中国农业银行",
         },
            {
               imgUrl: jianshe,
          name: "中国建设银行",
         }
     ]
    }
},
watch: {
    currentInputIndex (val) {
      if(val == 5){
        console.log(this.pasgroup)
         console.log(this.goodList)
        this.showsuccess = 1
        this.showzhifu = 0
         this.show1 = 0
        setTimeout(() => {
            this.showsuccess = 0
            this.$router.push({name:'ShoppingCar'})
        }, 2000);
     
       this.goodList.some((i)=>{
              let params = {
            store:i.store,
            title:i.title,
            goodname:i.goodname,
            goodimg:i.goodimg,
            goodprice:i.goodprice,
            num:i.num,
            type:1,
            user_id:localStorage.id
        };
        this.$ajax.post('/mysql/myorder.php',QS.stringify(params)).then((res)=>{
            console.log(res)
        })
           this.$ajax.get('/mysql/shoppingdel.php',{
               params:{
                   goodname:i.goodname
               }
           }).then((res)=>{
               console.log(res)
           })
       })
      }else if(val <= -1){
        this.currentInputIndex = -1
      }
    }
 },
created() {
    this.getparams();
    this.show();
       this. initPasswordGroup ()
},
mounted() {
    //  this.goodname =this.$store.getters.goodmessage.goodname;
    //     this.store = this.$store.getters.goodmessage.store
    //     console.log(this.goodname)
    this.id = this.$store.getters.id
    console.log(this.id)
     if(this.id == ''){
        this.$ajax.get('/mysql/addressselecttype.php',{
            params:{
                id:localStorage.id
            }
        }).then((res)=>{
          this.address = res.data
          console.log(this.address)
          if(this.address.length>0){
              this.type = 1
          }
       
        })
        }
        else{ 
              this.$ajax.get('/mysql/addressselectid.php',
              {
                  params:{
                      id:this.id
                  }
              }).then((res)=>{
          this.address = res.data
          console.log(this.address)
      
        this.type = 1
        })
        }
},
// computed:{
// id(){
//     return this.$store.getters.id
// }
// },
methods: {
    fanhui(){
this.show2 = 0
    },
    change(w){
this.moneyimg = w.imgUrl
this.moneyname = w.name
this.show2 = 0
    },
    way(){
this.show2 = 1
    },
       initPasswordGroup () {
  this.passwordGroup=[];
  for(var i=0;i<6;i++){
    this.passwordGroup.push({
        value:null
    })
  }
},

     inputPsd (value) {
      switch (value) {
        case '清空':
          this.currentInputIndex = -1
          this.pasgroup = []
          this.initPasswordGroup ()
          break;
        case '删除':
          this.pasgroup.pop()
          console.log(this.pasgroup)
          // this.currentInputIndex 下标值,删除添加时改变
          this.passwordGroup[this.currentInputIndex].value = null
          this.currentInputIndex--
          console.log(this.passwordGroup)
          break;
        default:
          this.pasgroup.push(value)
          this.currentInputIndex++
          this.passwordGroup[this.currentInputIndex].value = value
      }
    },

    cloce(){
        this.show1 = 0
        
    },
    close(){
this.showzhifu = 0
    },
      getImage(url) {
      // console.log(url);
      if (url !== undefined) {
        return url.replace(
          /^(http)[s]*(\:\/\/)/,
          "https://images.weserv.nl/?url="
        );
      }
    },
    getparams(){
        this.goodname = this.$route.query.goodname
        this.store = this.$route.query.store
        // this.id = this.$route.query.id
        // console.log(this.id)
    },
    show(){
       
      console.log(this.store)
        console.log(this.goodname)
        if(this.goodname == ''){
        this.$ajax.get('/mysql/shoppingwhere.php',{
          params:{
            store:this.store
          }
        }).then((res)=>{
          console.log(res)
          this.goodList = res.data
          this.goodList.forEach(i => {
              this.price = +i.goodprice*i.num+ + this.price
          });
        //   this.$router.go(0)
        })
        }
        else{
             this.$ajax.get('/mysql/shoppinggoodname.php',{
          params:{
            goodname:this.goodname
           
          }
        }).then((res)=>{
          console.log(res)
          this.goodList = res.data
            this.goodList.forEach(i => {
              this.price = +i.goodprice*i.num+ + this.price
          });
        //   this.$router.go(0)
        })
        };

    },
    jiesuan(){
this.show1=1
    },
    queren(){
        this.showzhifu = 1
    }
},
}
</script>
<style lang="scss" scoped>
    .top{
        margin: 70px 10px 0;

        .top1{
           display: flex;
           
         p{ 
              width: 330px;
             margin-bottom: 0;
             overflow: hidden;
            text-overflow: ellipsis;
             white-space: nowrap;
           
             }
           .biaoqian{
               font-size: 18px;
               margin-left: 10px;
               display: flex;
               align-items: center;
           }

        
        
        .user{
            padding-top: 5px;
            width: 330px;
            display: flex;
            justify-content: space-between;
 
        }}
    }
    .content{
        margin-top: 20px;
        .content-top{
            display: flex;
            i{
                font-size: 16px;
               
            }
            p{
                font-size: 16px;
                span{
                    font-weight: bold;
                }
            }
          
        }
        .content1{
            display: flex;
            justify-content: space-around;
           
        .title1{
            p{   
                margin-left: 10px;
        // width: 240px;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;    
        };
            }
            img{
                width: 80px;
                height: 80px;
            }
            .num{
                text-align: center;
            }
        }
        
       

    }
    .content2{
            margin-top:10px;
           .title2{
               display: flex;
               justify-content: space-between;
               p{
                   margin-bottom: 0;
               }
           }
           .title3{
                 display: flex;
               justify-content: space-between;
                p{
                   margin-bottom: 0;
               }
           }
            
        }
    .foot1{
        width: 100%;
        position: fixed;
        bottom:25px;
       .foot{
            display: flex;
            flex-direction: row-reverse;
             margin-right: 10px;
            .footer{
                display: flex;
                text-align: center;
                margin-right: 5px;
                p{
                    margin-top: 10px;
                    margin-bottom: 0;  
                    color: red; 
                }

            }
            button{
                width: 100px;
                height: 40px;
                background-color: orangered;
                color: white;
                border: white;

            }
        }  
    }
    .tanchu1{
        position: fixed;
        top:0;
      left: 0px;
        right: 0px;
        bottom: 0px;
        background:rgba(0,0,0,0.5);
    .tanchu{

        width: 300px;
        height: 300px;
        background-color: white;
        position: fixed;
         top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
        padding: 20px 10px;
        border-radius: 10px;
        .tanchu_top{
            font-size: 18px;
        }
        .tanchu_content{
            font-size: 20px;
            text-align: center;
            p{
               margin-bottom: 0; 
            }
            p:last-child{
                font-size: 24px;
                font-weight:bold;
            }
        }
        .tanchu_zhifu{
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            .money{
                display: flex;
                justify-content: space-around;
            }
        }
        .tanchu_foot{
            text-align: center;
            margin-top: 40px;
            button{
                 width: 120px;
                 height: 40px;
            background-color: rgb(102, 197, 102);
            color:white;
            border: white; 
            }
          
        }
    }}
 
 
.top3{
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    background:rgba(0,0,0,0.5);
    margin-left:-10px;
}
    .goods-psd{
        margin:180px auto 0;
        text-align: center;
        background: white;
        height: 200px;
        width: 350px;
      
        .apply-title{
            padding-top: 30px;
            font-size: 18px;
            font-weight: bold;
          
        }
         .psd-container{
    
        width: 250px;
        display: flex;
        margin: 20px auto 0;
        .psd-input{
            text-align:center;
            height: 40px;
            width: 40px;
            border: 1px solid rgb(184, 180, 180);
        }
        .psd-input:first-child{
            border-radius: 5px 0 0 5px;
        }
        .psd-input:last-child{
            border-radius: 0 5px 5px 0;
        }
    }
    }
    .foot2{
        position: fixed;
        bottom: 0;
        height: 230px;
        background: white;
         .input-pan{
        text-align: center;
        display: flex;
        flex-wrap:wrap;
        .pan-num{
            font-size: 20px;
            width: 125px;
            height: 57.5px;
           padding-top:15px;
        }
    }
    }
    .success1{
          position: fixed;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    background:rgba(0,0,0,0.5);
    margin-left:-10px;
    }
    .success{
        background: white;
        width: 200px;
        height: 200px;
        text-align: center;
       position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    }
    .way{
        background: white;
        width: 300px;
        height: 300px;
        position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    padding: 10px 10px;
   .zi{
        margin-left: 80px;
        font-size: 16px;
    }
    div{
     display: flex;
    justify-content: space-between;
    align-items: center;
    
       img{
        height: 2rem;
    }
    p{
        flex-grow: 1;
        margin: 0px;
        font-size: 1rem;
        color: $font-color;
        margin-left: $common-margin;
        border-radius: $common-border-radius;
    
    }
    }}
</style>